@import "@/components/visualization/styles/function.scss";

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.progress-content {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;

  &::-webkit-scrollbar {
    display: none; /* Chrome Safari */
  }

  .progress-section {
    flex-grow: 1;
    height: calc(200px - #{vw(50)});
    width: 100%;
    overflow: auto;
    padding: vw(16);

    .title {
      width: 20%;
      font-size: vw(14);
      font-family: Microsoft YaHei UI;
      font-weight: 400;
      color: rgba(0, 0, 0, 0.64);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .progress-list-form {
      width: 100%;
      height: 34px;
      line-height: 34px;
      display: flex;
      flex-direction: row;
      align-items: center;

      .right {
        flex-grow: 1;
        flex-shrink: 1;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding-left: vw(14);

        &-list {
          font-size: vw(14);
          font-family: Microsoft YaHei UI;
          font-weight: 400;
          color: rgba(0, 0, 0, 0.48);
        }
      }

      .banner {
        flex-grow: 1;
        display: flex;
        flex-direction: row;
        border-radius: vw(8);
        overflow: hidden;

        &-list {
          flex-grow: 1;
          width: 20%;
          height: vw(10);
          background: rgba(239, 243, 247, 1);
          // border-radius: 0 vw(8) vw(8) 0;
          position: relative;

          &::after {
            content: "";
            display: block;
            position: absolute;
            right: 0;
            top: vw(-0);
            width: vw(10);
            height: vw(10);
            background: rgba(255, 255, 255, 1);
            border: vw(2) solid rgba(212, 221, 229, 1);
            border-radius: vw(10);
          }
        }

        .banner-list-1 {
          width: vw(26);
          height: vw(10);
          background: rgba(239, 243, 247, 1);
          // border-radius: vw(8);

          &::after {
            content: "";
            display: block;
            position: absolute;
            right: 0;
            top: vw(-0);
            width: vw(10);
            height: vw(10);
            background: rgba(255, 255, 255, 1);
            border: vw(2) solid rgba(212, 221, 229, 1);
            border-radius: vw(10);
          }
        }

        [data-border="true"] {
          &.banner-list,
          &.banner-list-1 {
            &::after {
              content: "";
              border-color: #1fc557;
            }
          }
        }

        [data-background="true"] {
          &.banner-list,
          &.banner-list-1 {
            background: #1890ff;
            &::after {
              content: "";

              border-color: #1890ff;
            }
          }
        }

        [data-next="true"] {
          &.banner-list,
          &.banner-list-1 {
             border-radius: 0 vw(8) vw(8) 0;
          }
        }
      }
    }
  }
}